<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--[if lt IE 9]><!-->
		<script src="http://code.jquery.com/jquery-1.11.3.min.js "></script>
		<!--<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="https://code.jquery.com/jquery-3.2.1.min.js "></script>
		<!--<![endif]-->
		<script>
			/*1*/
			$(document).ready(function() {
				$("button").click(function() {
					/*$("p:first").addClass("intro");
					$("p").after("<div>Hello world!</div>");
					$("p").before("<div>你好!</div>");
					$("<span>Hello world!</span>").insertAfter("p");
					$("<span>Hello world!</span>").insertBefore("p");					
					$("<span>hi!</span>").appendTo("p");
					$("h1").clone().appendTo("body");
					$("img").attr("width", "500");//设置或返回被选元素的属性/值
					$("h6").css("color", "red");
					$("h5").html("Hello <b>world!</b>");*/
					
					alert("div的内部高度: " + $("h5").innerHeight());
					alert("div的内部宽度: " + $("h5").innerWidth());
					alert($("p").hasClass("intro"));
					alert("h5的高度: " + $("h5").height());
					/*$("p").detach();
					$("h5").empty();*/
				});

			});
			/*2*/
			/*$(document).ready(function() {
				$("#btn1").click(function() {
					$("p").append(" <b>插入文本</b>.");
				});
				$("#btn2").click(function() {
					$("ol").append("<li>插入项</li>");
				});
			});*/
			/*3*/
		</script>
		<style>
			.intro {
				font-size: 150%;
				color: red;
			}
		</style>
	</head>

	<body>
		<!--1-->
		<button>一个具有丰富功能的按钮</button>
		<h1>在body后会克隆一样的</h1>
		<h6>改变字体</h6>
		<h5 style="height:20px;width:100px;background-color:yellow">
			清空这是一些文本。
		</h5>
		<p>这是一个段落。</p>
		<p>这是另一个段落。</p>
		<img src="../img/dishu.jpg" alt="Pulpit Rock" width="284" height="213">

		<!--2-->
		<!--<p>这是一个段落。</p>
		<p>这是另一个段落</p>
		<ol>
			<li>列表项 1</li>
			<li>列表项 2</li>
			<li>列表项 3</li>
		</ol>
		<button id="btn1">插入文本</button>
		<button id="btn2">插入列表项</button>-->

		<!--3-->

	</body>

</html>